<template>
    <div>
        <div class="content" ref="content">
            <div class="editorContent el-card">
                <div class="header">
                    <div class="title">
                        <h1>{{ schemeDetail.name }}</h1>
                        <div class="schemeDetail">
                            <div class="createdUser">
                                <el-icon>
                                    <User />
                                </el-icon>{{ schemeDetail.createdUser }}
                            </div>
                            <div class="date">
                                <el-icon>
                                    <Clock />
                                </el-icon>{{ schemeDetail.UpdatedAt }}
                            </div>
                        </div>
                    </div>
                    <div class="btn">
                        <el-button size="mini" icon="Document">
                            下载
                        </el-button>
                        <el-button type="primary" size="mini" @click="toEdit">
                            编辑
                        </el-button>
                    </div>
                </div>
                <div class="editorContentHtml">
                    <div v-html="schemeDetail.doc" ref="doc" class="doc"> </div>
                    <div class="colum">
                        <h2>目录</h2>
                        <el-anchor :container="doc" direction="vertical" type="default" @click="handleClick">
                            <el-anchor-link :title="item.title" :key="index" v-for="(item, index) in catalog"
                                :href="`#${item.id}`" :style="{ paddingLeft: (item.level - 1) * 14 + 'px' }" />
                        </el-anchor>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onActivated, reactive, nextTick } from 'vue';
import { tplDetail } from './api/req.js';
import { useRoute, useRouter } from 'vue-router'
import moment from 'moment'


const content = ref(null)
const route = useRoute()
const router = useRouter()
let catalog = reactive([])
const doc = ref(null)
const schemeDetail = ref({})


const handleClick = (e) => {
    e.preventDefault()
}

onActivated(() => {
    getDetail()
})

const getDetail = async () => {
    try {
        const res = await tplDetail({
            id: route.query.id
        })
        if (res.code === 0) {
            res.data.UpdatedAt = moment(res.data.UpdatedAt).format('YYYY-MM-DD hh:mm')
            schemeDetail.value = res.data
            catalog.value = []
            getTitle()
        }
    } catch (error) {
        console.log(error)
    }
}

const getTitle = () => {
    nextTick(() => {
        // 根据之前设置的ref来获取文章的小标题
        const article_content = doc.value;
        // 想获取的标题，将想获取的小标题的标签添加到这
        const titleTag = ["H1", "H2", "H3", "H4", "H5", "H6"];
        article_content.childNodes.forEach((e, index) => {
            if (titleTag.includes(e.nodeName)) {
                const id = "header-" + index;
                // 设置元素id
                e.setAttribute("id", id);
                catalog.push({
                    id: id,
                    title: e.innerHTML,
                    level: Number(e.nodeName.substring(1, 2)),
                    nodeName: e.nodeName,
                    //read：后期主要用来判断当前阅读的是哪一个小标题的内容
                    read: false
                });
            }
        });
    })
}

const toEdit = () => {
    router.push({
        path: '/layout/penetration/editScheme',
        query: {
            id: route.query.id,
            type: 'tpl'
        }
    })
}

defineOptions({
    name: 'viewScheme'
})
</script>

<style lang="scss" scoped>
.content {
    display: flex;
    height: 100%;
    background-color: #fff;

    .editorContent {
        flex: 1;
        display: flex;
        flex-direction: column;

        .editor {
            flex: 1;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .header {
            display: flex;
            padding: 20px 10px;
            .title {
                flex: 1;
            }
        }

        .editorContentHtml {
            padding-left: 20px;
            display: flex;
            overflow: hidden;
            word-break: break-all;

            .doc {
                flex: 1;
                overflow-y: scroll;
                padding-right: 20px;

                p {
                    margin-left: 40px;
                }
            }

            .colum {
                width: 200px;
            }
        }
    }

    .nav {
        line-height: 32px;
        padding: 0 10px;
        display: flex;
        justify-content: space-between;

        .save {
            img {
                vertical-align: text-top;
            }

            span {
                font-size: 14px;
                margin-left: 3px;
            }
        }
    }

    .title {
        .schemeDetail {
            display: flex;
            font-size: 12px;
            color: rgb(120, 122, 125);
            height: 18px;
            line-height: 18px;
            .el-icon {
                margin-right: 5px;
            }

            div {
                width: 25%;
                display: flex;
                align-items: center;
            }
        }
    }

    .btn {
        display: flex;
        align-items: center;

        .el-button {
            height: 38px;
            width: 84px;
        }
    }
}
</style>